<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>三体宇宙图谱</title>
    <style>
        body { margin: 0; overflow: hidden; }
        #container { width: 100vw; height: 100vh; }
        .node-tooltip {
            position: absolute;
            background: rgba(0, 20, 40, 0.9);
            color: white;
            padding: 8px;
            border-radius: 4px;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <div class="node-tooltip"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        
        let scene, camera, renderer, raycaster = new THREE.Raycaster();
        const nodes = [];
        
        // 初始化场景
        function init() {
            // 场景设置
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.getElementById('container').appendChild(renderer.domElement);

            // 添加星空背景
            const stars = new THREE.TextureLoader().load('https://iknow-pic.cdn.bcebos.com/9f2f070828381f30b2f01537bb014c086f06f047');
            scene.background = stars;

            // 创建初始节点
            createGalaxyNodes();
            camera.position.z = 15;

            // 事件监听
            document.addEventListener('click', onDocumentClick);
            document.addEventListener('mousemove', onDocumentMove);
        }

        // 创建星系节点
        function createGalaxyNodes() {
            // 创建主星系（五大类别）
            const nodeTypes = ['人物', '科技', '事件', '组织', '哲学'];
            const angleStep = (Math.PI * 2) / nodeTypes.length;
            
            nodeTypes.forEach((type, i) => {
                // 主星系参数
                const mainRadius = 8;
                const posX = Math.cos(angleStep * i) * mainRadius;
                const posZ = Math.sin(angleStep * i) * mainRadius;
                
                // 主节点（带光环）
                const mainGeometry = new THREE.SphereGeometry(1.2, 32, 32);
                const mainMaterial = new THREE.MeshPhongMaterial({
                    color: getNodeColor(type),
                    emissive: 0x333333,
                    specular: 0x555555,
                    shininess: 100,
                    transparent: true,
                    opacity: 0.9
                });
                const mainNode = new THREE.Mesh(mainGeometry, mainMaterial);
                mainNode.position.set(posX, 0, posZ);
                
                // 添加光环
                const ringGeometry = new THREE.RingGeometry(1.5, 1.8, 32);
                const ringMaterial = new THREE.MeshBasicMaterial({
                    color: getNodeColor(type),
                    side: THREE.DoubleSide,
                    transparent: true,
                    opacity: 0.3
                });
                const ring = new THREE.Mesh(ringGeometry, ringMaterial);
                ring.rotation.x = Math.PI / 2;
                mainNode.add(ring);

                // 创建子节点（3-5个随机分布）
                const subNodes = [];
                const subCount = Math.floor(Math.random() * 3 + 3);
                for(let j = 0; j < subCount; j++) {
                    const subGeometry = new THREE.SphereGeometry(0.4, 16, 16);
                    const subMaterial = new THREE.MeshPhongMaterial({
                        color: getNodeColor(type),
                        emissive: 0x222222,
                        specular: 0x444444
                    });
                    const subNode = new THREE.Mesh(subGeometry, subMaterial);
                    
                    // 极坐标分布
                    const radius = 2.5 + Math.random() * 1.5;
                    const angle = (Math.PI * 2) * j/subCount;
                    subNode.position.set(
                        Math.cos(angle) * radius,
                        Math.sin(angle) * radius * 0.3,
                        0
                    );
                    subNode.rotationSpeed = (Math.random() - 0.5) * 0.02;
                    mainNode.add(subNode);
                    subNodes.push(subNode);
                }

                scene.add(mainNode);
                nodes.push({ main: mainNode, subs: subNodes });
            });

            // 添加动态光源
            const pointLight = new THREE.PointLight(0xffffff, 1.5, 50);
            pointLight.position.set(0, 10, 0);
            scene.add(pointLight);
        }

        // 节点颜色映射
        function getNodeColor(type) {
            const colors = {
                '人物': 0x4A90E2,
                '科技': 0x7ED321,
                '事件': 0xFF6B6B,
                '组织': 0xBD10E0,
                '哲学': 0xF5A623
            };
            return colors[type] || 0xFFFFFF;
        }

        // 交互动画
        function animate() {
            requestAnimationFrame(animate);
            
            nodes.forEach((nodeGroup) => {
                // 主节点自转
                nodeGroup.main.rotation.y += 0.005;
                
                // 子节点公转 + 自转
                nodeGroup.subs.forEach((sub, index) => {
                    sub.rotation.y += sub.rotationSpeed;
                    // 轨道运动
                    const time = Date.now() * 0.001;
                    const orbitRadius = 2 + Math.sin(time + index) * 0.3;
                    sub.position.x = Math.cos(time + index) * orbitRadius;
                    sub.position.z = Math.sin(time + index) * orbitRadius * 0.5;
                });
            });

            renderer.render(scene, camera);
        }

        // 点击事件处理
        function onDocumentClick(event) {
            const mouse = new THREE.Vector2();
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

            // raycaster.setFromCamera(mouse, camera);
            // const intersects = raycaster.intersectObjects(nodes);
            
            // if (intersects.length > 0) {
            //     showNodeDetail(intersects[0].object);
            // }
        }

        // 显示节点详情
        function showNodeDetail(node) {
            console.log(`进入节点：${node.userData.name}`);
            // 此处添加内容卡片显示逻辑
        }

        // 鼠标移动提示
        function onDocumentMove(event) {
            const tooltip = document.querySelector('.node-tooltip');
            const mouse = new THREE.Vector2();
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

            // raycaster.setFromCamera(mouse, camera);
            // const intersects = raycaster.intersectObjects(nodes);
            
            // if (intersects.length > 0) {
            //     tooltip.style.display = 'block';
            //     tooltip.style.left = `${event.clientX + 15}px`;
            //     tooltip.style.top = `${event.clientY + 15}px`;
            //     tooltip.textContent = intersects[0].object.userData.name;
            // } else {
            //     tooltip.style.display = 'none';
            // }
        }

        // 启动
        init();
        animate();
    </script>
</body>
</html>